<template>
	<div>
			<el-form-item v-if="$check_register_field('add','membership_card_number','/registered_user/view')" label="会员卡号" prop="membership_card_number">
					<el-input id="membership_card_number" v-model="form['membership_card_number']" placeholder="请输入会员卡号"></el-input>
				</el-form-item>
				<el-form-item v-if="$check_register_field('add','real_name','/registered_user/view')" label="真实姓名" prop="real_name">
					<el-input id="real_name" v-model="form['real_name']" placeholder="请输入真实姓名"></el-input>
				</el-form-item>
				<el-form-item v-if="$check_register_field('add','user_gender','/registered_user/view')" label="用户性别" prop="user_gender">
					<el-select id="user_gender" v-model="form['user_gender']">
				<el-option v-for="o in list_user_gender" :key="o" :label="o" :value="o">
				</el-option>
			</el-select>
				</el-form-item>
				<el-form-item v-if="$check_register_field('add','user_age','/registered_user/view')" label="用户年龄" prop="user_age">
					<el-input-number id="user_age" v-model.number="form['user_age']"></el-input-number>
				</el-form-item>
				<el-form-item v-if="$check_register_field('add','user_tags','/registered_user/view')" label="用户标签" prop="user_tags">
					<el-select id="user_tags" v-model="user_tags_multiple_value" multiple @change="select_user_tags_multiple">
				<el-option v-for="o in list_user_tags" :key="o.classification_name" :label="o.classification_name"
						   :value="o.classification_name">
				</el-option>
			</el-select>
				</el-form-item>
				<el-form-item v-if="$check_register_field('add','user_preferences','/registered_user/view')" label="用户喜好" prop="user_preferences">
					<el-select id="user_preferences" v-model="form['user_preferences']" @change="select_user_preferences_field">
				<el-option v-for="o in list_user_preferences" :key="o.classification_name" :label="o.classification_name"
						   :value="o.classification_name">
				</el-option>
			</el-select>
				</el-form-item>
				<el-form-item v-if="$check_register_field('add','description_and_explanation','/registered_user/view')" label="描述说明" prop="description_and_explanation">
					<el-input id="description_and_explanation" v-model="form['description_and_explanation']" placeholder="请输入描述说明" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item v-if="$check_register_field('add','document_information','/registered_user/view')" label="证件信息" prop="document_information">
					<el-input id="document_information" v-model="form['document_information']" placeholder="请输入证件信息"></el-input>
				</el-form-item>
				<el-form-item v-if="$check_register_field('add','user_photo','/registered_user/view')" label="用户照片" prop="user_photo">
					<el-upload id="user_photo" class="avatar-uploader" drag accept="image/gif, image/jpeg, image/png, image/jpg" action="" :http-request="uploadimg_user_photo" :show-file-list="false" >
				<img v-if="form['user_photo']" :src="$fullUrl($banseUrl,form['user_photo'])" class="avatar">
			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload>
				</el-form-item>
				<el-form-item v-if="$check_register_field('add','personal_works','/registered_user/view')" label="个人作品" prop="personal_works">
					<el-input id="personal_works" v-model="form['personal_works']" placeholder="请输入个人作品"></el-input>
				</el-form-item>
				<el-form-item v-if="$check_register_field('add','user_remarks','/registered_user/view')" label="用户备注" prop="user_remarks">
					<el-input type="textarea" id="user_remarks" v-model="form['user_remarks']" placeholder="请输入用户备注"></el-input>
				</el-form-item>
		</div>
</template>

<script setup>
import { ref, onMounted,toRefs } from "vue";
import { $post, $get } from "@/api/Api.js";
import storageHelper from "@/libs/StorageHelper";
import {
  $check_register_field,
  $fullUrl,
  $banseUrl,
  $get_stamp,
  $get_rand,
} from "@/utils/utils.js";
import { useStore } from "vuex";
let store = useStore();
const props = defineProps({
	form: {
        type: Object,
        default:{
				"membership_card_number":  '' ,
					"real_name":  '' ,
					"user_gender":  '' ,
					"user_age":  0 ,
					"user_tags":  '' ,
					"user_preferences":  '' ,
					"description_and_explanation":  '' ,
					"document_information":  '' ,
					"user_photo":  '' ,
					"personal_works":  '' ,
					"user_remarks":  '' ,
			},
    },
  })
let { form} = toRefs(props)//list
const emit = defineEmits(['update: form'])
let set_auth = (payload) => store.commit("web/set_auth", payload);

											let list_user_gender = ref(['男','女']);
															let user_tags_multiple_value = ref([]);
		let list_user_tags = ref([""]);
		//获取用户标签列表
let get_list_user_tags = async () => {
	let json = await $get("/api/classification_information/get_list");
	if (json.result && json.result.list) {
		list_user_tags.value = json.result.list;
	}
};
						//获取标签列表
let select_user_tags_multiple = (v) => {
	form.value.user_tags = "";
	if (v && v.length>0){
		form.value.user_tags = v.toString();
	}
};
								let list_user_preferences = ref([""]);
		//获取用户喜好列表
let get_list_user_preferences = async () => {
	let json = await $get("/api/classification_information/get_list");
	if (json.result && json.result.list) {
		list_user_preferences.value = json.result.list;
	}
};
				//获取用户喜好列表
let select_user_preferences_field = async (v) => {
	await $get("/api/classification_information/get_obj?classification_name="+v).then((res)=>{
		if (res.result && res.result.obj) {
			let obj=Object.assign({}, form.value)
																																																				obj.description_and_explanation=res.result.obj.description_and_explanation
																																						emit('update:num', obj)
		} else{
			console.error(res.error);
		}
	});

};
												/**
* 上传用户照片
* @param {Object} param 文件参数
*/
let uploadimg_user_photo=(param) =>{
	uploadFile(param.file, "user_photo");
}
											/**
 * 上传文件
 * @param {Object} file 文件对象
 * @param {key} 保存键名
 */
let url_upload = ref("/api/registered_user/upload");
const uploadFile = (file, key = "img") => {
  var formobj = new FormData(); // FormData 对象
  formobj.append("file", file); // 文件对象
  $upload(url_upload.value, formobj, function (json) {
    if (json.result) {
      form.value[key] = json.result.url;
    } else {
      ElMessage.error("上传失败！");
    }
  });
};

/**
 * 上传文件
 * @param {String} url 请求地址
 * @param {Object} body 请求参数
 * @param {Funciton} func 回调函数，可以为空，为空则采用await返回值
 * @return {Object} 返回请求结果
 */
let $upload = async (url, body, func) => {
	if (func) {
		// 如果回调函数存在, 则采用异步
			$post(url, body, {
			headers: {
				// "x-auth-token": token,
				"Content-Type": "multipart/form-data",
			},
		})
				.then((res) => {
					func(res);
				})
				.catch((res) => {
					func(res);
				});
	} else {
		// 否则采用同步
		var res = await $post(url, body, {
			headers: {
				"x-auth-token": token,
				"Content-Type": "multipart/form-data",
			},
		});
		return res;
	}
};

// 富文本编辑器更新
											onMounted(()=>{
					    get_list_user_tags();
    	    get_list_user_preferences();
    					})
</script>
